<template>
  <div class='hawkContent'>
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter='20' style='padding-left: 20px;'>
      <el-col :span='3'>
        <el-input placeholder='请输入名称搜索' v-model='queryForm.query.tname.filedValue'></el-input>
      </el-col>
      <el-col :span='3'>
        <el-input placeholder='请输入厂商搜索' v-model='queryForm.query.tspecification.filedValue'></el-input>
      </el-col>
        <el-col :span='3'>
        <el-input placeholder='请输入厂商搜索' v-model='queryForm.query.tvendor.filedValue'></el-input>
      </el-col>
      <el-col :span='4'>
        <el-button type='hawkSearch' @click='init'>搜索</el-button>
        <el-button plain @click='reSet'>重置</el-button>
      </el-col>
      <el-col :span='4' style='float: right;text-align: right;padding-right: 30px'>
        <el-button type='hawkCreate' @click='editUser'>创建电源</el-button>
        <el-button plain>导入</el-button>
      </el-col>
    </el-row>
    <hawk-table
      :table-data='tableData'
      :options='[{key:"id",label:"ID"}
      ,{key:"taftersales",label:"售后"}
      ,{key:"tname",label:"名称"}
      ,{key:"tposition",label:"所属位置"}
      ,{key:"tspecification",label:"规格"}
      ,{key:"tstatus",label:"状态"}
      ,{key:"tvendor",label:"厂商"}
      ,{key:"handle",label:"操作"}]'>
      <template #status='{ row }'>
        <span>{{ row.status }}</span>
      </template>
      <template #handle='{ row }'>
        <span class='hawk-text-btn' @click='editUser(row)'>编辑</span>
        <span class='hawk-text-divider'>|</span>
        <span class='hawk-text-btn' @click='delUser(row)'>删除</span>
        <span class='hawk-text-divider'>|</span>
        <span class='hawk-text-btn' @click='editUser(row,1)'>查看</span>
      </template>
    </hawk-table>
    <div class='bottom-btns'>
      <div class='bottom-btns-left'>
        <div class='bottom-btns-left-num'>{{ multipleSelection.length }} 选择</div>
        <el-button type='hawkDelete'>批量删除</el-button>
        <el-button plain>导出</el-button>
      </div>
      <el-pagination
        background
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page.sync='queryForm.page.current'
        :page-sizes='[10, 20, 50, 100]'
        :page-size='queryForm.page.size'
        layout=' prev, pager, next,sizes'
        :total='total'>
      </el-pagination>
    </div>
    <el-dialog
      :title='formTitle'
      :visible.sync='addDialogVisible'
      width='50%'
      :close-on-click-modal='false'
      @close='addDialogClosed'
    >
      <!-- 内容主题区 -->
      <el-form
        :model='addForm'
        :rules='addFormRules'
        ref='addFormRef'
        label-width='120px'
      >
        <el-form-item label='售后' prop='taftersales'>
          <el-input v-model='addForm.taftersales'></el-input>
        </el-form-item>
        <!-- <el-form-item label='电源日期' prop='tedate'>
              <el-date-picker
                v-model="addForm.tedate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
        </el-form-item> -->
        <el-form-item label='名称' prop='tname'>
          <el-input v-model='addForm.tname'></el-input>
        </el-form-item>
        <el-form-item label='所属位置' prop='tposition'>
          <el-input v-model='addForm.tposition'></el-input>
        </el-form-item>
        <el-form-item label='规格' prop='tspecification'>
          <el-input v-model='addForm.tspecification'></el-input>
        </el-form-item>
        <el-form-item label='状态' prop='tstatus'>
          <el-switch
            v-model="addForm.tstatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="正常"
            inactive-value="异常"
            >
          </el-switch>
        </el-form-item>
        <el-form-item label='厂商' prop='tvendor'>
          <el-input v-model='addForm.tvendor'></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot='footer' class='dialog-footer'>
        <el-button @click='addDialogVisible = false'>取 消</el-button>
        <el-button type='primary' @click='save'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author  韩玉龙
 * @description 电源视图容器
 * @api /cmdb-ups
 * @since 2021-10-12 15:30
 * @update 
 * @modifier  
 * @bug 无
 * @version v1.0.1
 */

import { getList, doDelete, doAdd, doEdit } from '@/api/ups'
import HawkTable from '@/components/table'
import HawkBreadcrumb from '@/components/breadcrumb/Breadcrumb'
export default {
  components: { HawkBreadcrumb, HawkTable },
  //import引入的组件需要注入到对象中才能使用",
  data() {
    return {
      formTitle: '添加电源',
      addDialogVisible: false,
      multipleSelection: [],
      addForm: {
        id: '',
        taftersales: '',
        tedate:'',
        tname: '',
        tposition: '',
        tspecification:'',
        tstatus:'正常',
        tvendor:'',
      },
      addFormRules: {
        taftersales: [
          { required: true, message: '请输入售后', trigger: 'blur' },
        ],
        tedate: [
          { required: true, message: '请输入电源日期', trigger: 'blur' },
        ],
        tname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        tposition: [
          { required: true, message: '请输入所属位置', trigger: 'blur' },
        ],
        tspecification: [
          { required: true, message: '请输入规格', trigger: 'blur' }
        ],
        tstatus: [
          { required: true, message: '请输入状态', trigger: 'blur' },
        ],
        tvendor: [
          { required: true, message: '请输入厂商', trigger: 'blur' }
        ],

      },
      tableData: [],
      total: 0,
      queryForm: {
        query: {
          taftersales: {
            filedValue: '',
            req: 'like'
          },
          tname: {
            filedValue: '',
            req: 'like'
          },
          tposition: {
            filedValue: '',
            req: 'like'
          },
          tspecification: {
            filedValue: '',
            req: 'like'
          },
          tvendor: {
            filedValue: '',
            req: 'like'
          },
        },
        page: {
          current: 1,
          size: 10
        }

      }
    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle() {
      return {
        padding: '8px 0'
      }
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    reSet() {
      this.queryForm = this.$options.data().queryForm
    },
    async init() {
      const res = await getList(this.queryForm.page)
      console.log(res.list)
      this.tableData = res.list
      this.total = res.count
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(size) {
      this.queryForm.page.size = size
      this.init()
    },
    handleCurrentChange(index) {
      console.log(index)
      this.current = index
      this.init()
    },
    save() {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
          console.log("PUT")
        } else {
          await doAdd(this.addForm)
          console.log("post")
        }
        this.addDialogClosed()
        this.init()
      })
    },
    delUser(row) {
      this.$confirm('此操作将删除该电源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        doDelete(row.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.init()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editUser(row, type) {
      if (!row.id) {
        this.formTitle = '添加电源'
      } else {
        if (type) {
          this.formTitle = '查看电源'
          this.addForm = Object.assign({}, row)
        } else {
          this.formTitle = '修改电源信息'
          this.addForm = Object.assign({}, row)
        }

      }
      this.addDialogVisible = true
    },
    addDialogClosed() {
      this.addForm = this.$options.data().addForm
      this.addDialogVisible = false
    }

  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {

  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.init()

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  }

}
</script>

<style lang='scss'>

</style>
